<template>
    <div id='headernav'>
        <div class="div">
            <div class="HomeHeader-logo"></div>
            <div class="HomeHeader-searchB" @click="search">搜索</div>
            <div class="HomeHeader-chargeB">充值</div>
            <div class="HomeHeader-openAppB">打开App</div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'headernav',
        data() {
            return {

            }
        },
        updated() {

        },
        methods: {
            search() {
                this.$router.push({
                    path: "/search"
                })
            }
        },
    }
</script>
<style scoped>
    #headernav {
        position: fixed;
        top: 0;

        z-index: 99;
    }

    #headernav .div {

        display: flex;
        align-items: center;
        width: 100%;
        height: 54px;
        background-color: #fff;
        overflow: hidden;
    }

    #headernav .div .HomeHeader-logo {
        margin: 6px 10px;
        width: 76px;
        height: 34px;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/logo_864f3ef.png) no-repeat;
        background-size: 100% 100%;
    }

    #headernav .div .HomeHeader-searchB {
        width: 120px;
        height: 28px;
        border-radius: 14px;
        background: #f2f2f2;
        margin-left: 10px;
        background-image: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/search_0f4cda6.png);
        background-size: 16px 16px;
        background-position: 10px 6px;
        background-repeat: no-repeat;
        padding-left: 32.5px;
        font-size: 14px;
        color: #bbb;
        line-height: 28px;
        display: flex;
    }

    #headernav .div .HomeHeader-chargeB {
        color: #666;
        margin-left: 10px;
        width: 49px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
    }

    #headernav .div .HomeHeader-openAppB {
        background: #ff5d23;
        border-radius: 14px;
        color: #fff;
        letter-spacing: .92px;
        margin-right: 10px;
        margin-left: 10px;
        width: 74px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
    }

    .HomeHeader .HomeHeader-openApp,
    .HomeHeader .HomeHeader-openAppB {
        margin-left: 10px;
        width: 74px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        font-size: 12px;

    }

    #headernav .div .left-fext {
        font-size: 0.427rem;
        color: #fff;
    }

    #headernav .div .left-fext {
        font-size: 0.427rem;
        color: #fff;
    }
</style>